<template>
    <div class="root">
        <navs titles="微信"></navs>
        <div class="container">
            <div class="line" @click="tochat(item.username,item.header)" v-for="(item,index) in chatlist" :key="index">
                <div class="head"><img :src="item.header" width="100%" height="100%" alt=""></div>
                <div class="text">
                    <div class="name"><h4>{{item.username}}</h4></div>
                    <div class="jilu">打得不错~</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import navs from '../components/nav.vue'
export default {
    data(){
        return {
            idphone:'',
            username:'',
            chatlist:[],
            socketid:''
            // test:1
        }
    },
    components:{
        navs
    },
    methods:{
        async tochat(objname,objheader){
            // await this.$http.post('')
            window.sessionStorage.setItem('chatobj',objname)
            window.sessionStorage.setItem('objheader',objheader)
            this.$router.push('/tochar')
        },
        async getalluser(){
            const {data:msg} = await this.$http.post('/api/getalluser',this.idphone)
            msg.msg.forEach(item=>{
                this.chatlist.push(item)
            })
        }
    },
    mounted(){
        // console.log(this.$store.state.count)
        this.$store.state.userMsg.push(window.sessionStorage.getItem('userMsg'))
        this.idphone = JSON.parse(this.$store.state.userMsg[0]).phone
        this.username = JSON.parse(this.$store.state.userMsg[0]).userName
        // console.log(this.chatlist)
        // console.log(this.username)
        // console.log(this.$store.state.userMsg)
        // if(window.sessionStorage.getItem('time') === '1'){
        //     location.reload()
        //     window.sessionStorage.setItem('time',2)
        // }
        this.getalluser()
    },
    sockets:{
        ids(value){
            console.log(value)
            this.$store.state.user1 = value
            // console.log(this.$store.state.user1)
            // this.test++
            console.log(this.username)
            console.log(this.$store.state.user1)
            this.$http.post('/api/socketUser',{username:this.username,socketis:this.$store.state.user1}).then(res=>{
                console.log(res)
            })
        }    
    }
}
</script>

<style lang="less" scoped>
    .root{
        width: 100%;
        height: 100%;
        // background-color: #2ecc71;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(247, 247, 247);
    }
    .container{
        width: 95vw;
        height: 100%;
        // border: 1px solid #ccc;
        .line{
            width: 95vw;
            height: 70px;
            border-bottom: 1px solid #ccc;
            display: flex;
            align-items: center;
            .head{
                width: 55px;
                height: 55px;
                // background-color: #3498db;
            }
            .text{
                width: 100px;
                height: 100%;
                // background-color: #34495e;
                flex-grow: 1;
                .name{
                    width: 100%;
                    height: 55%;
                    display: flex;
                    align-items: center;
                    // background-color: skyblue;
                    padding-top: 7px;
                    padding-left: 8px;
                }
                .jilu{
                    width: 100%;
                    height: 45%;
                    // background-color: steelblue;
                    padding-left: 8px;
                    font-size: 13px;
                    color: rgb(169, 169, 169);
                }
            }
        }
    }
</style>
